<template>
	<view class="container">
		<view class="map">
			<map :latitude="vdata.mapData.latitude" :longitude="vdata.mapData.longitude" :markers="vdata.mapData.covers" :enable-building="true" :circles="vdata.mapData.circles">
			</map>
		</view>

		<!-- 商户列表 -->
		<view class="mch-list">
			<view class="header-wrap">
				<text class="title">商户列表</text>
				<view class="filter" @click="onOpen()">
					<uni-icons type="settings" size="24"></uni-icons>
					<text>筛选</text>
				</view>
				<view @tap="onMchImport" class="filter" style="margin-left: 20rpx;padding: 16rpx;background: #24C789;">
					<text style="color: #fff;">商户入驻</text>
				</view>
			</view>

			<view class="content-wrap">
				<view class="item" v-for="item in useDataResult.dataList">
					<text class="no">商户号：{{ item.mchNo }}</text>
					<view class="line"></view>
					<text class="title">商户姓名:{{ item.mchName }}</text>
					<view class="number">
						<text class="total-num">商户归属机构：{{ vdata.agentName }}</text>
						<view class="info" @tap="onMchRemove(item.groupMchId)">解绑</view>
					</view>
					<!-- <view class="number">
						<text class="total-num">添加人：王大力</text>
					</view> -->
					<view class="number">
						<text class="time">添加时间：{{ item.createdAt }}</text>
					</view>
				</view>
			</view>

			<gzListNull :list="useDataResult.dataList"></gzListNull>
		</view>

		<uni-popup ref="searchPopup" type="top">
			<view class="search-popup-content">
				<view class="item">
					<text>商户号</text>
					<input class="input" placeholder-style="color:#BBBBBB" placeholder="请输入商户号" v-model="vdata.queryParams.mchNo" />
				</view>
				<view class="item">
					<text>商户名称</text>
					<input class="input" placeholder-style="color:#BBBBBB" placeholder="请输入商户名称" v-model="vdata.queryParams.mchName" />
				</view>
				<view class="bottom-wrap">
					<text class="reset" @click="onReset">重置</text>
					<text class="query" @click="onQuery">查询</text>
				</view>
			</view>
		</uni-popup>

		<gzConfirm ref="gzConfirmRef">
			<template>
				确认解绑当前商户吗？
			</template>
		</gzConfirm>
		<!-- 商户入驻 -->
		<gzConfirm ref="mchImportRef">
			<template>
				<view class="mchImport">
					<view class="item">
						<text>商户号</text>
						<input class="input" placeholder-style="color:#BBBBBB" placeholder="请输入商户号" v-model="vdata.importMchNo" />
					</view>
				</view>
			</template>
		</gzConfirm>
	</view>
</template>

<script setup>
	import { onPageScroll, onLoad } from '@dcloudio/uni-app'

	import { ref, reactive, getCurrentInstance } from 'vue'
	import { $groupMchList, $groupMchRemove, $importMch } from '@/http/marketing/apiMarketing.js'
	import useGetList from '@/hooks/useGetList.js'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	const { useDataResult, getList } = useGetList($groupMchList, data => data, {}, false)
	// 顶部导航不透明度
	const opacity = ref(0)
	// 搜索弹框
	const searchPopup = ref(0)
	// 确认解绑弹框
	const gzConfirmRef = ref()
	// 商户入驻弹窗
	const mchImportRef = ref()
	// 数据源
	const vdata = reactive({
		queryParams: { // 筛选
			mchNo: '',
			mchName: ''
		},
		groupId: '', // 当前商圈id
		importMchNo: '', // 导入商户
		groupInfo: {}, // 商圈信息
		mapData: { // 地图相关信息
			id: 0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 34.7466287061769,
			longitude: 113.62536678210733,
			circles: [{
				latitude: 34.7466287061769,
				longitude: 113.62536678210733,
				radius: 200,
				fillColor: '#C0D0F6aa',
				color: '#C0D0F6'
			}],
			covers: [{
				id: 0,
				latitude: 34.7466287061769,
				longitude: 113.62536678210733,
			}]
		},
	})
	onLoad((option) => {
		const { lat, lng, radius, groupId, agentName } = JSON.parse(option.groupInfo)
		vdata.groupId = groupId // 保存商圈id
		vdata.agentName = agentName
		vdata.mapData.latitude = lat
		vdata.mapData.longitude = lng
		vdata.mapData.circles[0].latitude = lat
		vdata.mapData.circles[0].longitude = lng
		vdata.mapData.covers[0].latitude = lat
		vdata.mapData.covers[0].longitude = lng
		vdata.mapData.circles[0].radius = Number(radius)
		/**
		 * 请求商户列表
		 */
		getList({ groupId })
	})
	/**
	 * 解绑商圈商户
	 */
	const onMchRemove = (groupMchId) => {
		getApp().preventActive(()=>{
			gzConfirmRef.value.comfirmOpen(
				() => {
					$groupMchRemove({ groupMchId }).then(({ bizData }) => {
						for (let i in useDataResult.dataList) {
							if (useDataResult.dataList[i].groupMchId == groupMchId) {
								useDataResult.dataList.splice(i, 1)
								break
							}
						}
						$infoBox.toast('解绑成功！')
					})
				}
			)
		})
		
	}
	/**
	 * 商户入驻
	 */
	function onMchImport() {
		mchImportRef.value.comfirmOpen(
			() => {
				const uploadData = {
					groupMchList: [vdata.importMchNo],
					groupId: vdata.groupId
				}
				$importMch(uploadData).then(() => {
					getList({ groupId: vdata.groupId })
					$infoBox.toast('入驻成功！')
				})
			},''
		)
	}
	/**
	 * 打开弹窗
	 */
	const onOpen = () => {
		searchPopup.value.open();
	}
	/**
	 * 筛选
	 */
	const onQuery = () => {
		getList(vdata.queryParams)
		onClose()
	}
	/**
	 * 重置
	 */
	const onReset = () => {
		vdata.queryParams = {
			mchNo: '',
			mchName: ''
		}
	}
	/**
	 * 关闭弹窗
	 */
	const onClose = () => {
		searchPopup.value.close();
	}

	onPageScroll((e) => {
		if (e.scrollTop < 150) {
			opacity.value = e.scrollTop / 150
		}
	})
</script>

<style lang="less">
	@page-backgroud: #FAFAFD; //页面背景色

	.container {
		height: calc(100vh - 680rpx);
		background-color: @page-backgroud;
	}

	.map {
		width: 100%;
		height: 720rpx;
		position: fixed;
		top: 0;
		left: 0;

		map {
			width: 100%;
			height: 100%;
		}
	}

	.mch-list {
		background-color: @page-backgroud;
		margin-top: 680rpx;
		padding: 0 32rpx 50rpx;
		position: relative;
		z-index: 0;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.header-wrap {
			width: 100%;
			// position: fixed;
			// height: 120rpx;
			// top: 0;
			// left: 0;
			padding-top: 50rpx;
			padding-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// z-index: 2;
			box-sizing: border-box;
			// padding: 0 30rpx;

			background-color: @page-backgroud;

			position: sticky;
			top: 0;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				font-style: normal;
				flex-grow: 1;
			}


			.filter {
				display: flex;
				align-items: center;
				border-radius: 40rpx;
				background-color: white;
				padding: 8rpx 20rpx;
				border: 1rpx solid #C8C8C8;

				text {
					font-size: 26rpx;
					color: black;
					letter-spacing: 1px;
					margin-bottom: 2rpx;
				}
			}

		}

		.content-wrap {
			width: 100%;
			// margin-top: 30rpx;

			.item {
				box-sizing: border-box;
				padding: 30rpx;
				background: #fff;
				border-radius: 20rpx;
				box-shadow: 0rpx -10rpx 30rpx -30rpx rgba(0, 0, 0, 0.8);
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;


				.no {
					font-size: 26rpx;
					color: #333333;
				}

				.line {
					height: 1rpx;
					background-color: #E6E6E6;
					margin: 20rpx 0rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					margin: 15rpx 0rpx;
				}

				.number {
					display: flex;
					color: darkgray;
					font-size: 26rpx;
					margin: 5rpx 0rpx;
					align-items: center;

					.total-num {
						margin-right: 50rpx;
						flex-grow: 1;
					}

					.time {
						flex-grow: 1;
					}

					.info {
						border: 1rpx solid #FF5A5A;
						border-radius: 35rpx;
						background-color: white;
						padding: 15rpx 30rpx;
						color: #FF5A5A;
						box-shadow: 0rpx -10rpx 30rpx -30rpx rgba(0, 0, 0, 0.8);
					}
				}

			}
		}
	}

	.search-popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx;
		font-size: 26rpx;
		background-color: white;
		border-radius: 0 0 20rpx 20rpx;
		letter-spacing: 1px;
		box-sizing: border-box;
		padding-top: 120rpx;

		.item {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			width: 100%;

			.input {
				border-radius: 40rpx;
				padding: 18rpx 30rpx;
				background-color: #F6F7FC;
				margin-top: 20rpx;
				font-size: 30rpx;
			}

		}


		.bottom-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 30rpx;
			margin-top: 30rpx;
			margin-bottom: 10rpx;
			width: 100%;

			.reset {
				color: black;
				border-radius: 40rpx;
				width: 25%;
				padding: 18rpx 0rpx;
				background-color: #F4F5F5;
				text-align: center;
				margin-right: 30rpx;
			}

			.query {
				color: white;
				border-radius: 40rpx;
				width: 75%;
				padding: 18rpx 0rpx;
				background-color: #24C789;
				margin-top: 30rpx;
				text-align: center;
				margin-bottom: 10rpx;
			}
		}

	}

	.mchImport {
		.item {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			width: 100%;
			color: #333;

			.input {
				border-radius: 40rpx;
				padding: 18rpx 30rpx;
				background-color: #F6F7FC;
				margin-top: 20rpx;
				font-size: 30rpx;
			}

		}
	}
</style>